   import React from "react"
   import { Button,Form, Input,notification } from 'antd';
   import './index.scss'
   import {  UserOutlined,UnlockOutlined } from '@ant-design/icons';
   import commonConfig from 'static/js/commonConfig'
   import {userLogin} from 'api/index'
   import { connect } from 'react-redux'
   import {saveUserInfo,updateRoute} from 'redux/action'


   class Login extends React.Component{  

      state = {
       loading:false
      }
   
     onFinish=(value)=>{

       this.setState({
         loading:true
       })

      const Login = async (value) => {
try {
  
        // eslint-disable-next-line no-use-before-define
        const res = await userLogin(value)

        this.props.saveUserInfo(res.result || {})
        const tokenName = window.location.href.indexOf('/prd')===-1?'token-llx-test':'token-llx'
        localStorage.setItem(tokenName,res.result.token)

        const data = res.result.menus.map(i=>i.url[0].toLowerCase()+i.url.slice(1))

        const data1 = [
          {menuName: "单词管理",url:'word',children:[{menuName:'单词库',url:'wordLibrary'},{menuName:'单词详情',url:'wordInfo',hide:true}]},
          {menuName: "音频管理",url:'audio',children:[{menuName:'音频库',url:'audioLibrary'},{menuName:'音频详情',url:'audioInfo',hide:true}]},
          {menuName: "视频管理",url:'video',children:[{menuName:'视频库',url:'videoLibrary'},{menuName:'视频详情',url:'videoInfo',hide:true},
          {menuName:'视频专辑',url:'videoAlbumLibrary'},{menuName:'视频专辑详情',url:'videoAlbumInfo',hide:true},
          {menuName:'学习视频',url:'studyVideoLibrary'},{menuName:'学习视频详情',url:'studyInfo',hide:true}
        ]},  
         {menuName: "绘本管理",url:'book',children:[{menuName:'泛读库',url:'bookLibrary'},{menuName:'泛读详情',url:'bookInfo',hide:true},{menuName:'泛读新增',url:'bookAdd',hide:true},
        {menuName:'精读库',url:'intensiveBook'},{menuName:'精读详情',url:'intensiveBookInfo',hide:true}
        ]},
        {menuName: "题目管理",url:'test',children:[{menuName:'试卷库',url:'testPaperLibrary'},{menuName:'试卷详情',url:'testPaperInfo',hide:true},{menuName:'题库',url:'subjectLibrary'}
        ]},
        {menuName: "圈图游戏",url:'graph',children:[{menuName:'圈图库',url:'graphLibrary'}]},
        {menuName: "学习计划/体系课",url:'plan',children:[{menuName:'学习计划',url:'planLibrary'},{menuName:'同步练',url:'planSubject',hide:true},{menuName:'主题课库',url:'courseSubject'},{menuName:'主题课详情',url:'themeSubjectInfo',hide:true},
        {menuName:'用户主题课',url:'userCounrseSubject'},{menuName:'用户主题课列表',url:'userCounrseSubjectList',hide:true}]},
        {menuName: "任务分配",url:'ordinary',children:[{menuName:'任务分配',url:'task'}]},
        {menuName: "推送探索",url:'areaPush',children:[
        {menuName:'图书馆推送池',url:'areaPushBookLibrary'},
        {menuName:'电台推送池',url:'areaPushAudioLibrary'},
        {menuName:'电影院推送池',url:'areaPushVideoLibrary'},
        {menuName:'分类规则配置',url:'areaPushRule'},
        {menuName:'探索区',url:'explorePool'},
        {menuName:'探索规则配置',url:'explorePoolRule'},
        {menuName:'素材测试区',url:'testPool'},
        ]},
        {menuName: "高级管理",url:'task',children:[
        {menuName:'字典数据',url:'dictionaries'},
        {menuName:'标签管理',url:'label'},
        {menuName:'定级目标',url:'gradingResults'},
        {menuName:'具体目标',url:'levelExplain'},
        {menuName:'级别映射',url:'mappingLevel'},
        {menuName:'评级和金币配置',url:'readRule'}
        ]},
        {menuName: "超级管理员",url:'super',children:[
          {menuName:'用户管理',url:'employeesManagement'},
          {menuName:'角色管理',url:'roleManagement'},
          {menuName:'权限管理',url:'ruleManagement'}
        ]},
        ]

        const data2 = []
        
        data1.forEach(i=>{
          i.children.forEach((x,y)=>{
            if(data.includes(x.url)){
              // 保留
              if(!data2.filter(w=>w.url===i.url).length){
                data2.push({
                  menuName: i.menuName, url: i.url, children:[x]
                })
              } else {
                data2.filter(w=>w.url===i.url)[0].children.push(x)
              }
            }
          })
        })

        this.props.updateRouteFn(data2.filter(i=>i.children&&i.children.length))

         this.props.history.push('/view/word/wordLibrary')

         this.setState({
           loading:false
         })
         const data3 = new Date()

         const value1 = data3.getFullYear() + '年' + (data3.getMonth()+1) + '月' + data3.getDay() + '日'
     
         const hour = data3.getHours()
     
         let title = ''
     
         if(hour<12) {
           title='早上好'
         } else if(hour<18){
           title='下午好'
         } else {
           title='晚上好'
         }
     
         setTimeout(()=>{
           notification.success({
             message: value1,
             description: title,
             duration:2
           });
         },500)
} catch(err){

} finally {
  this.setState({
    loading:false
  })
}
       }
       Login(value)
     }
   
     render(){
       return <div className="login">
        
         <div>
         <h1 className='animate__animated animate__fadeInDown'>
           流利星运营后台
         </h1>
       <Form
       name="basic"
       size='large'
       initialValues={{
         remember: true,
       }}
       onFinish={this.onFinish}
       autoComplete="off"
     >
       <Form.Item
         rules={commonConfig.checkRules('loginName')}
         name="loginName"
       >
         <Input  className='animate__animated animate__fadeInRight' placeholder="请输入账号" allowClear prefix={<UserOutlined className="site-form-item-icon" />}/>
       </Form.Item>
     
       <Form.Item
         name="password"
         rules={commonConfig.checkRules('password')}
       >
         <Input.Password showCount maxLength={20} className='animate__animated animate__fadeInLeft'  placeholder="请输入密码" allowClear prefix={<UnlockOutlined className="site-form-item-icon" /> }  />
       </Form.Item>
     
       <Form.Item>
          <Button className="animate__animated animate__fadeInUp" shape="round" loading={this.state.loading} block type="primary" htmlType="submit">
            登录
          </Button>
       </Form.Item>
     
       </Form>
      </div>
     </div>
     }
   
   }

   // 映射方法
const mapDispatchToProps = (dispatch) => {
  return {
    saveUserInfo: (info) => dispatch(saveUserInfo(info)),
    updateRouteFn:(data)=>dispatch(updateRoute(data)),
  }
}

export default connect((state=>{
  return {menus:state.menus}
}),mapDispatchToProps)(Login)

   